
import React from 'react';
import { Card, message, Form, Checkbox, Select as FormilySelect, Button, DatePicker, Row, Col } from 'antd';
import {
    FormButtonGroup,
    FormGrid,
    FormItem,
    Input,
    Reset,
    Select,
    Space,
    Submit,
} from '@formily/antd-v5'

import { dictionaryWhether,invoiceTypeOptions, specialTicketTypeOptions, drawerList, reviewerList, payeeList, paymentTypeOptions, taxCalculationOptions, departmentOptions } from './businessFinance';

import { FormTableItem } from './FormTableType';

// 定义列配置
const columns:FormTableItem[] = [
    {
        title: '单据行号',
        key: 'lineNumber',
        width: 100,
        renderFormItem: (index) => <span>{index + 1}</span>,
    },
    {
        title: '开票归属部门',
        key: 'billingDepartment',
        width: 200,
        renderFormItem: (index, field, form) => (
            <Form.Item
                name={[field.name, 'billingDepartment']}
                rules={[{ required: true, message: '请选择部门' }]}
            >
                <FormilySelect placeholder="选择部门" >
                    {departmentOptions.map(option => (
                        <FormilySelect.Option key={option.value} value={option.value}>
                            {option.label}
                        </FormilySelect.Option>
                    ))}
                </FormilySelect>
            </Form.Item>
        ),
    },
    {
        title: (
            <span>
                <span style={{ color: 'red', marginLeft: 4 }}>*</span>  税码
            </span>
        ),
        key: 'taxCode',
        width: 100, // 固定宽度
        renderFormItem: (index) =>
            <Button color="primary" variant="solid">
                选择
            </Button>,
    },
    {
        title:  (
            <span>
                <span style={{ color: 'red', marginLeft: 4 }}>*</span>  商品开票明细
            </span>
        ),
        key: 'productInvoiceDetailsList',
        renderFormItem: (index) =>
            <Button color="primary" variant="solid">
                选择
            </Button>,
    },
    {
        title:  (
            <span>
                <span style={{ color: 'red', marginLeft: 4 }}>*</span> 客户名称
            </span>
        ),

        key: 'customerName',
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'customerName']} rules={[{ required: true, message: '请输入客户名称' }]}>
                <Input placeholder="客户名称" />
            </Form.Item>
        ),
    },
    {
        title: (
            <span>
                <span style={{ color: 'red', marginLeft: 4 }}>*</span>  发票类型
            </span>
        ),

        key: 'invoiceType',
        width: 200, // 固定宽度
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'invoiceType']} rules={[{ required: true, message: '请选择发票类型' }]}>
                <FormilySelect placeholder="选择发票类型">
                    {invoiceTypeOptions.map(option => (
                        <FormilySelect.Option key={option.value} value={option.value}>
                            {option.label}
                        </FormilySelect.Option>
                    ))}
                </FormilySelect>
            </Form.Item>
        ),
    },
    {
        title: (
            <span>
                <span style={{ color: 'red', marginLeft: 4 }}>*</span>  特殊票种
            </span>
        ),

        key: 'specialTicketType',
        width: 200, // 固定宽度
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'specialTicketType']} rules={[{ required: true, message: '请选择特殊票种' }]}>
                <FormilySelect placeholder="选择特殊票种">
                    {specialTicketTypeOptions.map(option => (
                        <FormilySelect.Option key={option.value} value={option.value}>
                            {option.label}
                        </FormilySelect.Option>
                    ))}
                </FormilySelect>
            </Form.Item>
        ),
    },
    {
        title: (
            <span>
                <span style={{ color: 'red', marginLeft: 4 }}>*</span>  是否开具清单
            </span>
        ),
       
        key: 'isIssueList',
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'isIssueList']} valuePropName="checked">
                <Checkbox />
            </Form.Item>
        ),
    },
    {
        title: '购买方名称', key: 'purchaserName', renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'purchaserName']}>
                <Input placeholder="购买方名称" />
            </Form.Item>),
    },
    {
        title: '购买方纳税识别号',
        key: 'purchaserTaxId',
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'purchaserTaxId']}>
                <Input placeholder="购买方纳税识别号" />
            </Form.Item>),
    },
    {
        title: '购买方地址电话',
        key: 'purchaserAddressPhone',
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'purchaserAddressPhone']}>
                <Input placeholder="购买方地址电话" />
            </Form.Item>),
    },
    {
        title: '购买方开户行及账号',
        key: 'purchaserBankAccount',
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'purchaserBankAccount']}>
                <Input placeholder="购买方开户行及账号" />
            </Form.Item>),
    },
    {

        title: '发票内容备注', key: 'invoiceontentRemarks', width: 250,

        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'remark']} >
                <Input placeholder="输入备注" />
            </Form.Item>
        ),
    },
    {
        title:  (
            <span>
                <span style={{ color: 'red', marginLeft: 4 }}>*</span>  开票人
            </span>
        ),
        key: 'drawer',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'drawer']} rules={[{ required: true, message: '请选择开票人' }]}>
                <FormilySelect placeholder="输入开票人">
                    {drawerList.map(option => (
                        <FormilySelect.Option key={option.value} value={option.value}>
                            {option.label}
                        </FormilySelect.Option>
                    ))}
                </FormilySelect>
            </Form.Item>
        ),
    },
    {
        title: (
            <span>
                <span style={{ color: 'red', marginLeft: 4 }}>*</span>  收款人
            </span>
        ),
        key: 'payee',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'payee']} rules={[{ required: true, message: '请选择收款人' }]}>
                <FormilySelect placeholder="输入收款人">
                    {payeeList.map(option => (
                        <FormilySelect.Option key={option.value} value={option.value}>
                            {option.label}
                        </FormilySelect.Option>
                    ))}
                </FormilySelect>
            </Form.Item>
        ),
    },
    {
        title: '复核人',
        key: 'reviewer',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'reviewer']}  rules={[{ required: true, message: '请选择复核人' }]}>
                <FormilySelect placeholder="输入复核人">
                    {reviewerList.map(option => (
                        <FormilySelect.Option key={option.value} value={option.value}>
                            {option.label}
                        </FormilySelect.Option>
                    ))}
                </FormilySelect>
            </Form.Item>
        ),
    },
    {
        title: '备注',
        key: 'remarks',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'remarks']}>
                <Input placeholder="输入备注" />
            </Form.Item>
        ),
    },
    {
        title: '收款类型',
        key: 'paymentType',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'paymentType']}>
                <FormilySelect placeholder="输入收款类型">
                    {paymentTypeOptions.map(option => (
                        <FormilySelect.Option key={option.value} value={option.value}>
                            {option.label}
                        </FormilySelect.Option>
                    ))}
                </FormilySelect>
            </Form.Item>
        ),
    },
    {
        title: '电子发票接收邮箱',
        key: 'eInvoiceEmail',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'eInvoiceEmail']}>
                <Input placeholder="输入电子发票接收邮箱" />
            </Form.Item>
        ),
    },

    // 第二组字段
    {
        title: '信息表编码',
        key: 'informationFormCode',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'informationFormCode']}>
                <Input placeholder="输入信息表编码" />
            </Form.Item>
        ),
    },
    {
        title: '计税方式',
        key: 'taxCalculationMethod',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'taxCalculationMethod']}>
                <FormilySelect placeholder="输入计税方式">
                    {taxCalculationOptions.map(option => (
                        <FormilySelect.Option key={option.value} value={option.value}>
                            {option.label}
                        </FormilySelect.Option>
                    ))}
                </FormilySelect>
            </Form.Item>
        ),
    },
    {
        title: '建筑服务发生地(省市区)',
        key: 'constructionServiceLocation',
        width: 250,
        hidden: true,
        renderFormItem: (index, field, form) => {
            // 获取当前行的数据
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            // 只有当specialTicketType等于'constructionServiceLocation'时才显示输入框
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';

            return shouldShow ? (
                <Form.Item name={[field.name, 'constructionServiceLocation']}>
                    <Input placeholder="输入建筑服务发生地(省市区)" />
                </Form.Item>
            ) : <div></div>;
        },
    },
    {
        title: '建筑服务发生地详细地址',
        key: 'constructionServiceDetailedAddress',
        width: 250,
        hidden: true,
        renderFormItem: (index, field, form) => {
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            // 只有当specialTicketType等于'constructionServiceLocation'时才显示输入框
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';
            return shouldShow ? (
                <Form.Item name={[field.name, 'constructionServiceDetailedAddress']}>
                    <Input placeholder="输入建筑服务发生地详细地址" />
                </Form.Item>
            ) : <div></div>;

        },
    },
    {
        title: '建筑项目名称',
        key: 'constructionProjectName',
        width: 250,
        renderFormItem: (index, field, form) => {
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';
            return shouldShow ? (
                <Form.Item name={[field.name, 'constructionProjectName']}>
                    <Input placeholder="输入建筑项目名称" />
                </Form.Item>
            ) : <div></div>;
        },
    },
    {
        title: '土地增值税项目编号',
        key: 'landValueAddedTaxProjectNumber',
        width: 250,
        renderFormItem: (index, field, form) => {
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';
            return shouldShow ? (
                <Form.Item name={[field.name, 'landValueAddedTaxProjectNumber']}>
                    <Input placeholder="输入土地增值税项目编号" />
                </Form.Item>
            ) : <div></div>;
        },
    },
    {
        title: '是否跨地(市)',
        key: 'isCrossCity',
        width: 250,
        renderFormItem: (index, field, form) => {
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';
            return shouldShow ? (
                <Form.Item name={[field.name, 'isCrossCity']}>
                    <FormilySelect placeholder="输入是否跨地(市)">
                        {dictionaryWhether.map(option => (
                            <FormilySelect.Option key={option.value} value={option.value}>
                                {option.label}
                            </FormilySelect.Option>
                        ))}
                    </FormilySelect>
                </Form.Item>
            ) : <div></div>;
        },
    },
    {
        title: '跨区域涉税事项报验管理编号',
        key: 'crossRegionalTaxInspectionNumber',
        width: 250,
        renderFormItem: (index, field, form) => {
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';
            return shouldShow ? (
                <Form.Item name={[field.name, 'crossRegionalTaxInspectionNumber']}>
                    <Input placeholder="输入跨区域涉税事项报验管理编号" />
                </Form.Item>
            ) : <div></div>;
        },
    },
    {
        title: '房屋产权证书/不动产权证不动产权证号码',
        key: 'housingPropertyCertificateNumber',
        width: 250,
        renderFormItem: (index, field, form) => {
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';
            return shouldShow ? (
                <Form.Item name={[field.name, 'housingPropertyCertificateNumber']}>
                    <Input placeholder="输入房屋产权证书/不动产权证号码" />
                </Form.Item>
            ) : <div></div>;
        },
    },
    {
        title: '不动产地址(省市区)',
        key: 'realEstateAddress',
        width: 250,
        renderFormItem: (index, field, form) => {
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';
            return shouldShow ? (
                <Form.Item name={[field.name, 'realEstateAddress']}>
                    <Input placeholder="输入不动产地址(省市区)" />
                </Form.Item>
            ) : <div></div>;
        },
    },
    {
        title: '不动产详细地址',
        key: 'realEstateDetailedAddress',
        width: 250,
        renderFormItem: (index, field, form) => {
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';
            return shouldShow ? (
                <Form.Item name={[field.name, 'realEstateDetailedAddress']}>
                    <Input placeholder="输入不动产详细地址" />
                </Form.Item>
            ) : <div></div>;
        },
    },
    {
        title: '租赁期开始',
        key: 'leasePeriodStart',
        width: 250,
        renderFormItem: (index, field, form) => {
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';
            return shouldShow ? (
                <Form.Item name={[field.name, 'leasePeriodStart']}>
                    <DatePicker placeholder="选择租赁期开始日期" format="YYYY-MM-DD" />
                </Form.Item>
            ) : <div></div>;
        },
    },
    {
        title: '租赁期结束',
        key: 'leasePeriodEnd',
        width: 250,
        renderFormItem: (index, field, form) => {
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';
            return shouldShow ? (
                <Form.Item name={[field.name, 'leasePeriodEnd']}>
                    <DatePicker placeholder="选择租赁期结束日期" format="YYYY-MM-DD" />
                </Form.Item>
            ) : <div></div>;
        },
    },
    {
        title: '是否跨地(市)',
        key: 'isCrossCity',
        width: 250,
        renderFormItem: (index, field, form) => {
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';
            return shouldShow ? (
                <Form.Item name={[field.name, 'isCrossCity']}>
                    <Input placeholder="输入是否跨地(市)" />
                </Form.Item>
            ) : <div></div>;
        },
    },
    {
        title: '跨区域涉税事项报验管理编号',
        key: 'crossRegionalTaxInspectionNumber',
        width: 250,
        renderFormItem: (index, field, form) => {
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';
            return shouldShow ? (
                <Form.Item name={[field.name, 'crossRegionalTaxInspectionNumber']}>
                    <Input placeholder="输入跨区域涉税事项报验管理编号" />
                </Form.Item>
            ) : <div></div>;
        },
    },
    {
        title: '面积单位',
        key: 'areaUnit',
        width: 250,
        renderFormItem: (index, field, form) => {
            const currentRowData = form.getFieldValue(['items', field.name]) || {};
            const shouldShow = currentRowData.specialTicketType === 'constructionServiceLocation';
            return shouldShow ? (
                <Form.Item name={[field.name, 'areaUnit']}>
                    <Input placeholder="输入面积单位" />
                </Form.Item>
            ) : <div></div>;
        },
    },
    // 第三组字段
    {
        title: '发票号码',
        key: 'invoiceNumber',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'invoiceNumber']}>
                <Input placeholder="输入发票号码" />
            </Form.Item>
        ),
    },
    {
        title: '发票代码',
        key: 'invoiceCode',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'invoiceCode']}>
                <Input placeholder="输入发票代码" />
            </Form.Item>
        ),
    },
    {
        title: '发票金额',
        key: 'invoiceAmount',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'invoiceAmount']}>
                <Input placeholder="输入发票金额" />
            </Form.Item>
        ),
    },
    {
        title: '发票金额(不含税)',
        key: 'invoiceAmountExcludingTax',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'invoiceAmountExcludingTax']}>
                <Input placeholder="输入发票金额(不含税)" />
            </Form.Item>
        ),
    },
    {
        title: '发票税金',
        key: 'invoiceTax',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'invoiceTax']}>
                <Input placeholder="输入发票税金" />
            </Form.Item>
        ),
    },
    {
        title: '发票日期',
        key: 'invoiceDate',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'invoiceDate']}>
                <DatePicker format="YYYY-MM-DD" placeholder="选择发票日期" />
            </Form.Item>
        ),
    },
    {
        title: '合同名称',
        key: 'contractName',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'contractName']}>
                <Input placeholder="输入合同名称" />
            </Form.Item>
        ),
    },
    {
        title: '合同累计开票金额（含税）',
        key: 'contractCumulativeInvoiceAmountIncludingTax',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'contractCumulativeInvoiceAmountIncludingTax']}>
                <Input placeholder="输入合同累计开票金额（含税）" />
            </Form.Item>
        ),
    },

    // 第四组字段
    {
        title: '是否培训业务',
        key: 'isTrainingBusiness',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'isTrainingBusiness']}>
                <Input placeholder="输入是否培训业务" />
            </Form.Item>
        ),
    },
    {
        title: '拆分到培训班明细',
        key: 'splitToTrainingClassDetails',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'splitToTrainingClassDetails']}>
                <Input placeholder="输入拆分到培训班明细" />
            </Form.Item>
        ),
    },
    {
        title: '拆分到项目明细',
        key: 'splitToProjectDetails',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'splitToProjectDetails']}>
                <Input placeholder="输入拆分到项目明细" />
            </Form.Item>
        ),
    },
    {
        title: '项目名称',
        key: 'projectName',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'projectName']}>
                <Input placeholder="输入项目名称" />
            </Form.Item>
        ),
    },
    {
        title: '已核销金额',
        key: 'verifiedAmount',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'verifiedAmount']}>
                <Input placeholder="输入已核销金额" />
            </Form.Item>
        ),
    },
    {
        title: '未核销金额',
        key: 'unverifiedAmount',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'unverifiedAmount']}>
                <Input placeholder="输入未核销金额" />
            </Form.Item>
        ),
    },
    {
        title: 'SAP凭证号',
        key: 'sapVoucherNumber',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'sapVoucherNumber']}>
                <Input placeholder="输入SAP凭证号" />
            </Form.Item>
        ),
    },
    {
        title: 'SAP过账日期',
        key: 'sapPostingDate',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'sapPostingDate']}>
                <Input placeholder="输入SAP过账日期" />
            </Form.Item>
        ),
    },
    {
        title: '发票下载',
        key: 'invoiceDownload',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'invoiceDownload']}>
                <Input placeholder="输入发票下载信息" />
            </Form.Item>
        ),
    },
    {
        title: '综合附件',
        key: 'comprehensiveAttachments',
        width: 250,
        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'comprehensiveAttachments']}>
                <Input placeholder="输入综合附件信息" />
            </Form.Item>
        ),
    },

    {

        title: '备注', key: 'remark', width: 250,

        renderFormItem: (index, field) => (
            <Form.Item name={[field.name, 'remark']}>
                <Input placeholder="输入备注" />
            </Form.Item>
        ),
    },
];

export default columns;